<template>
	<view class="details u-skeleton" :style="{minHeight:screen + 'px'}">
		<u-navbar rightSwitch :bgColorShow="false" :fixed_h="false"
			:bgColor="`rgba(255,207,79,${Math.round(scrollTopp) / 150})`" title="　" :back="false">
			<template #center>
				<view class="home-navbar">
					<view class="navbar-left">
						<button class="navbar-back cu-btn u-skeleton-circle" @click="backChang">
							<view class="back-icon">
								<u-icon name="arrow-left" color="#000" size="23"></u-icon>
							</view>
						</button>
						<view class="navbar-shop u-skeleton-fillet" :style="{opacity:Math.round(scrollTopp) / 150}">
							<view class="navbar-avatar u-skeleton-circle">
								<u-avatar border lineColor="#fff" :src="shop_data.logo" size="35"></u-avatar>
							</view>
							<view class="navbar-name u-skeleton-rect">{{shop_data.title}}</view>
						</view>
					</view>
					<view class="navbar-right" :style="{opacity:Math.round(scrollTopp) / 150}">
					</view>
				</view>
			</template>
		</u-navbar>
		<view class="details-swiper u-skeleton-fillet">
			<u-swiper radius="0" @click="swiperChang" :list="swiper_list" height="400"/>
		</view>
		<!-- :style="{backgroundImage:`url(${bacg_url})`}" -->
		<view class="details-card u-skeleton-fillet">
			<view class="details-content">
				<view class="details-mask">
					<view class="mask-left">
						<view class="navbar-avatar u-skeleton-circle">
							<u-avatar border lineColor="#fff" :src="shop_data.logo" size="40"></u-avatar>
						</view>
						<view class="navbar-name u-skeleton-fillet">{{shop_data.title}}</view>
					</view>
					<view class="mask-right">
						<!-- 				<button class="mask-share cu-btn">
							<view class="share-icon">
								<u-icon name="share" size="19" color="#FFF"></u-icon>
							</view>
						</button> -->
						<button class="cu-btn read-num u-skeleton-fillet">
							<view class="read-icon u-skeleton-rect">
								<u-icon name="eye" color="#FFF" size="18"></u-icon>
							</view>
							{{details.views>999?'999+':details.views}}
						</button>
					</view>
				</view>
				<view class="details-drawer" :style="{paddingBottom:(45+safeArea) + 'px'}">
					<u-sticky :offsetTop="StateVh - 1" bgColor="#FFF" customNavHeight="44" zIndex="1">
						<view class="details-tabs">
							<u-tabsw :active-item-style="{color:'#000'}" :list="list" allBold active-color="#FFCF4F"
								inactive-color="#666666" :is-scroll="false" :current="current" @change="change">
							</u-tabsw>
						</view>
					</u-sticky>
					<view class="details-information">
						<template v-if="current==0">
							<u-parse :tagStyle="style" :content="details.content"></u-parse>
							<listempty mode="page" vh="300px" v-if="!details.content" text="详情正在赶来的路上" :list="content" />
						</template>
						<template v-if="current==1">
							<commodity-trends v-for="item in user_goods" :key="item.id" :item="item" />
							<listempty mode="favor" vh="300px" text="暂无购买记录" :list="user_goods" />
						</template>
						<template v-if="current==2">
							<commodity-evaluate v-for="item in comment_list" :key="item.id" :item="item" />
							<listempty mode="history" vh="300px" text="暂无评价记录" :list="comment_list" />
						</template>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<statusbar bagr>
			<view class="details-navigation" :style="{paddingBottom:!safeArea?'30px':''}">
				<view class="navigation-left ">
					<button class="navigation-round cu-btn u-skeleton-circle" @click.stop="$refs.commSku.open()">
						<view class="round-icon">
							<u-icon name="shopping-cart" color="#000" size="35"></u-icon>
						</view>
					</button>
					<button class="navigation-round cu-btn u-skeleton-circle" open-type="share">
						<view class="round-icon show">
							<u-icon name="share" color="#000" size="35"></u-icon>
						</view>
					</button>
				</view>
				<view class="navigation-right">
					<button class="cu-btn navigation-button u-skeleton-circle"
						@click.stop="$refs.commSku.open()">我要买</button>
				</view>
			</view>
		</statusbar>
		<commodity-sku :sku_data="details" :scrolls="false" safe ref="commSku" />
		<u-skelete :loading="loading" animation />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper_list:['https://youlefang.szhulian.cn/uploads/image/20231031/91f72367502a877213fdfc11f09a6653.jpg','https://youlefang.szhulian.cn/uploads/image/20231102/7b943b18be5d0bf231e9c606f7d64140.jpg'],
				loading: true,
				style: {
					// 字符串的形式
					// p: 'color: red;font-size:32rpx',
					// span: 'font-size: 30rpx'
					img: 'border-radius:10px'
				},
				content:[],
				scrollTopp: 0,
				list: [{
						name: '详情'
					},
					{
						name: '购买记录(***)'
					},
					{
						name: '评价'
					}
				],
				current: 0,
				time: null,
				o_id: '',
				details: {}
			};
		},
		onPageScroll(e) {
			this.scrollTopp = e.scrollTop;
		},
		computed: {
			bacg_url() {
				return this.details.cover_img || ''
			},
			comment_list() {
				return this.details.comment || []
			},
			user_goods() {
				return this.details.user_goods_list || []
			}
		},
		onLoad(e) {
			this.o_id = e.id
			this.$u.vuex('vuex_oid', e.id)
			this.getcomodity()
		},
		methods: {
			swiperChang(e){
				this.previewChang(this.details.img,e)
			},
			getcomodity(e) {
				this.$network('/api/goods/detail', {
					id: this.o_id,
					check_goods_type: '0'
				}).then(res => {
					const {
						detail
					} = res.data
					this.details = detail
					this.swiper_list = detail.img
					this.list[1].name = `购买记录(${this.user_goods.length})`
					this.list[2].name = `评论(${this.comment_list.length})`
					this.$u.vuex('vuex_Product', detail)
				}).finally((e) => {
					this.$nextTick(() => {
						setTimeout(() => {
							this.loading = false
						}, 600)
					})
				})
			},
			change(e) {
				this.current = e
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}
	.details-swiper{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	.details-navigation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 30rpx;
		height: 45px;

		.navigation-left {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 40%;

			.navigation-round {
				width: 100rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				padding: 0;
				margin: 0;
				background-color: #FFF;
				box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

				.round-icon {
					position: relative;
					right: 2px;
				}
			}
		}

		.navigation-right {
			width: 55%;

			.navigation-button {
				width: 100%;
				height: 45px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFCF4F;
				color: #FFF;
				font-weight: bold;
				font-size: 30rpx;
				padding: 0;
				margin: 0;
				border-radius: 24px;
			}
		}
	}

	.details-information {
		padding-top: 20rpx;
	}

	.details-drawer {
		width: 100%;
		border-radius: 20px 20px 0 0;
		padding: 0 20px 20px;
		min-height: 300px;
		background: #FFF;
		position: relative;
		top: -15px;
	}

	.mask-right {
		display: flex;
		align-items: center;

		.read-num {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			padding: 0;
			border-radius: 24px;
			background-color: #FFCF4F;
			color: #333;
			font-size: 28rpx;
			padding: 0 10px;
			margin-left: 10px;

			.read-icon {
				margin-right: 10rpx;
			}
		}

		.mask-share {
			width: 70rpx;
			height: 70rpx;
			background-color: #000;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;

			.share-icon {
				position: relative;
				right: 2px;
			}
		}
	}

	.details-card {
		width: 100%;
		// height: 900rpx;
		// background-size: 110%;
		// background-repeat: no-repeat;
		// background-attachment: fixed;
		position: absolute;
		top: 300px;
		left: 0;
		width: 100%;

		.details-content {
			// position: absolute;
			// top: 65%;
			// left: 0;
			// width: 100%;

			.details-mask {
				width: 100%;
				background: linear-gradient(185deg, rgba(255, 255, 255, 0) 20%, rgba(0, 0, 0, 0.5) 80%);
				padding: 15px 15px 30px 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.mask-left {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #FFF;
					font-weight: 550;
					letter-spacing: 1px;

					.navbar-avatar {
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	.navbar-back {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin: 0;
		padding: 0;
		background-color: rgba(255, 255, 255, 0.5) !important;

		.back-icon {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			left: -3px;
		}
	}

	.navbar-shop {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}

	.home-navbar {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.navbar-right {
			.navbar-service {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background: #ffd460;
			}
		}

		.navbar-left {
			display: flex;
			align-items: center;
			font-size: 25rpx;
			color: #FFF;

			.navbar-avatar {
				margin-right: 15rpx;
			}
		}
	}
</style>
